import androidx.compose.desktop.ui.tooling.preview.Preview
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.AlertDialog
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Card
import androidx.compose.material.Checkbox
import androidx.compose.material.CheckboxDefaults
import androidx.compose.material.Divider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Tab
import androidx.compose.material.TabRow
import androidx.compose.material.TabRowDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.WindowPosition
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.application

@Preview
@Composable
fun UserLoginPage() {
    var selectIndex by remember { mutableStateOf(0) }
    var tabTitles = listOf("账号登录", "手机号登录")
    var accountname by remember { mutableStateOf("") }
    var accountpwd by remember { mutableStateOf("") }
    var accountphone by remember { mutableStateOf("") }
    var accountcode by remember { mutableStateOf("") }
    var rememberPwd by remember { mutableStateOf(false) }
    Card(
        modifier = Modifier.fillMaxSize(),
        shape = RoundedCornerShape(10.dp),
        elevation = 0.dp,
        backgroundColor = Color.White
    ) {
        Row(
            modifier = Modifier.fillMaxSize()
        ) {
            // 左侧
            Column(
                modifier = Modifier.fillMaxHeight().weight(0.55F)
            ) {
                Image(
                    painterResource("image/login_left_side.png"),
                    contentDescription = "",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier.fillMaxSize()
                )
            }
            // 右侧
            Column(
                modifier = Modifier.fillMaxHeight().weight(0.45F)
                    .padding(horizontal = 40.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                TabRow(
                    selectedTabIndex = selectIndex,
                    backgroundColor = Color.White,
                    contentColor = Color(0xFF1BD184),
                    divider = {
                        TabRowDefaults.Divider(
                            color = Color(0xFFE4E7ED),
                            thickness = 2.dp
                        )
                    }
                ) {
                    tabTitles.forEachIndexed { index, title ->
                        Tab(
                            selected = selectIndex == index,
                            onClick = { selectIndex = index },
                            text = {
                                Text(
                                    text = title,
                                    color = if (selectIndex == index)
                                        Color(0xFF2E3033) else Color(0xFF8A8F99),
                                    fontSize = 24.sp,
                                    fontWeight = FontWeight.SemiBold
                                )
                            }
                        )
                    }
                }
                Box(
                    modifier = Modifier.fillMaxWidth()
                ) {
                    if (selectIndex == 0) {
                        AccountLoginCompose(
                            accountName = accountname,
                            accountPwd = accountpwd,
                            onNameValue = { accountname = it },
                            onPwdValue = { accountpwd = it }
                        )
                    } else {
                        PhoneLoginCompose(
                            accountPhone = accountphone,
                            accountCode = accountcode,
                            onPhoneValue = { accountphone = it },
                            onCodeValue = { accountcode = it }
                        )
                    }
                }
                Spacer(modifier = Modifier.height(10.dp))
                Row(
                    modifier = Modifier.fillMaxWidth().clickable {
                        rememberPwd = !rememberPwd
                    }, horizontalArrangement = Arrangement.Start,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Checkbox(
                        checked = rememberPwd,
                        onCheckedChange = { rememberPwd = it },
                        colors = CheckboxDefaults.colors(
                            checkedColor = Color(0xFF1BD184),
                            uncheckedColor = Color(0xFFE4E7ED)
                        )
                    )
                    Text("记住密码", color = Color(0xFF8A8F99), fontSize = 18.sp)
                }
                Spacer(modifier = Modifier.height(20.dp))
                Button(
                    onClick = {},
                    modifier = Modifier.fillMaxWidth().height(50.dp),
                    colors = ButtonDefaults.buttonColors(
                        backgroundColor = Color(0xFF1BD184),
                        contentColor = Color.White,
                        disabledContentColor = Color(0xFF1BD184).copy(alpha = 0.6F)
                    )
                ) {
                    Text("确定", style = MaterialTheme.typography.h6)
                }
                Spacer(modifier = Modifier.height(30.dp))
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Divider(modifier = Modifier.fillMaxWidth().weight(1F))
                    Spacer(modifier = Modifier.height(4.dp))
                    Text(
                        "第三方账号登录",
                        style = MaterialTheme.typography.body1,
                        color = Color(0xFF8A8F99)
                    )
                    Spacer(modifier = Modifier.height(4.dp))
                    Divider(modifier = Modifier.fillMaxWidth().weight(1F))
                }
                Spacer(modifier = Modifier.height(30.dp))
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Image(
                        painterResource("image/ic_qq_circle.png"),
                        contentDescription = "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.size(50.dp)
                    )
                    Spacer(modifier = Modifier.height(30.dp))
                    Image(
                        painterResource("image/ic_wechat_circle.png"),
                        contentDescription = "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.size(50.dp)
                    )
                    Spacer(modifier = Modifier.height(30.dp))
                    Image(
                        painterResource("image/ic_email_circle.png"),
                        contentDescription = "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.size(50.dp)
                    )
                }

            }
        }
    }
}

@Composable
@OptIn(ExperimentalUnitApi::class, ExperimentalMaterialApi::class)
fun simpleShowDialog(isOpenDialog: MutableState<Boolean>, isOpenWindow: MutableState<Boolean>) {
    if (isOpenDialog.value) {
        AlertDialog(
            modifier = Modifier.fillMaxHeight(0.5F).fillMaxWidth(0.5F).padding(),
            onDismissRequest = {},
            title = null,
            text = {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text("提示", style = MaterialTheme.typography.h6)
                    Spacer(modifier = Modifier.height(20.dp))
                    Text("是否关闭窗口程序", style = MaterialTheme.typography.h6)
                }
            },
            buttons = {
                Row(modifier = Modifier.fillMaxWidth().padding(bottom = 4.dp)) {
                    Button(
                        onClick = { isOpenDialog.value = false },
                        shape = RoundedCornerShape(100.dp),
                        modifier = Modifier.weight(1F).height(40.dp),
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = Color(0xFF44B8F2),
                            contentColor = Color.White,
                            disabledContentColor = Color(0xFF1BD184).copy(alpha = 0.6F)
                        )
                    ) {
                        Text("取消", style = MaterialTheme.typography.h6)
                    }
                    Spacer(modifier = Modifier.width(10.dp))
                    Button(
                        onClick = { isOpenWindow.value = false },
                        shape = RoundedCornerShape(100.dp),
                        modifier = Modifier.weight(1F).height(40.dp),
                        colors = ButtonDefaults.buttonColors(
                            backgroundColor = Color(0xFF44B8F2),
                            contentColor = Color.White,
                            disabledContentColor = Color(0xFF1BD184).copy(alpha = 0.6F)
                        )
                    ) {
                        Text("确定", style = MaterialTheme.typography.h6)
                    }
                }
            }
        )
    }
}

@Composable
fun LoginApp(isOpenWindow: MutableState<Boolean>, isOpenDialog: MutableState<Boolean>) {
    MaterialTheme{
        simpleShowDialog(isOpenWindow,isOpenDialog)
        UserLoginPage()
    }
}

fun main() = application {
    val isOpenWindow = remember { mutableStateOf(true) }
    val isOpenDialog = remember { mutableStateOf(false) }
    if (isOpenWindow.value) {
        Window(
            title = "Compose Desktop",
            icon = painterResource("image/ic_application.svg"),
            onCloseRequest = { isOpenDialog.value = true },
            state = WindowState(
                size = DpSize(1280.dp, 800.dp),
                position = WindowPosition(alignment = Alignment.Center)
            )
        ) {
            LoginApp(isOpenDialog, isOpenWindow)
        }

    }
}
